<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <link th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet" />
    <link th:href="@{/static/css/bootstrap-responsive.min.css}" rel="stylesheet" />
    <link rel="stylesheet" th:href="@{/static/css/font-awesome.min.css}" />
    <style>
        /* .required{
             width: 250px;
         }*/
        .kong{
            width: 600px;
        }
    </style>
    <title>商品列表</title>

    <style>
        nav[role="navigation"] {
            text-align: center;
        }
        .cd-pagination {
            width: 90%;
            max-width: 768px;
            margin: 2em auto 2em;
            text-align: center;
        }
        .cd-pagination li {
            /* 小屏幕上隐藏数字 */
            display: none;
            margin: 0 .2em;
        }
        .cd-pagination li.button {
            /* 显示上一页和下一页按钮 */
            display: inline-block;
        }
        .cd-pagination a, .cd-pagination span {
            display: inline-block;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            /* 设置按钮大小 */
            padding: .6em .8em;
            font-size: 1rem;
        }
        .cd-pagination a {
            border: 1px solid #e6e6e6;
            border-radius: 0.25em;
        }
        .no-touch .cd-pagination a:hover {
            background-color: #f2f2f2;
        }
        .cd-pagination a:active {
            /* 点击效果 */
            -webkit-transform: scale(0.9);
            -moz-transform: scale(0.9);
            -ms-transform: scale(0.9);
            -o-transform: scale(0.9);
            transform: scale(0.9);
        }
        .cd-pagination a.disabled {
            /* 按钮不可用 */
            color: rgba(46, 64, 87, 0.4);
            pointer-events: none;
        }
        .cd-pagination a.disabled::before, .cd-pagination a.disabled::after {
            opacity: .4;
        }
        .cd-pagination .button:first-of-type a::before {
            content: '\00ab  ';
        }
        .cd-pagination .button:last-of-type a::after {
            content: ' \00bb';
        }
        .cd-pagination .current {
            /* 当前页码 */
            background-color: #64a281;
            border-color: #64a281;
            color: #ffffff;
            pointer-events: none;
        }
        @media only screen and (min-width: 768px) {
            .cd-pagination li {
                display: inline-block;
            }
        }
        @media only screen and (min-width: 1170px) {
            .cd-pagination {
                margin: 4em auto 8em;
            }
        }
        input[type="text"]{
            border: 1px solid #ccc;
            padding: 2px;
            font-size: 1.2em;
            color: #444;
            width: 200px;
        }

    </style>
    <script>
        function del() {
            if (confirm("您确定要删除吗？")) {
                return true;
            } else {
                return false;
            }
        }
    </script>
</head>
<body>
<center>
<form th:action="@{/product/findAll}"  width="90%">
    <input type="text" name="pName" placeholder="商品编号或名称" th:value="${pName}" />
    <button type="submit">search</button>
</form>
</center>
<table class="table table-striped table-bordered table-hover" align="center" width="90%">
    <thead>
    <tr>
        <th>商品编号</th>
        <th>品牌名称</th>
        <th>生产工厂</th>
        <th>商品名称</th>
        <th>产品规格</th>
        <th>产品图片</th>
        <th>操作</th>
    </tr>
    </thead>
    <tr th:each="product : ${products}">
        <td align="center"><a th:href="@{/product/view(productId=${product.productId})}" th:text="${product.productId}"></a></td>
        <td align="center" th:text="${product.productName}"></td>
        <td align="center" th:text="${product.brandName}"></td>
        <td align="center" th:text="${product.factoryName}"></td>
        <td align="center" th:text="${product.productStandard}"></td>
        <td align="center"><img th:src="${#request.getContextPath()+'/'+staticAccessPath+product.productImg}" style="width:50px;height:30px;"/></td>
        <td>
            <a th:href="@{/product/toUpdate(productId=${product.productId})}" th:text="修改"></a>---
            <a th:href="@{/product/del(productId=${product.productId})}" onclick="return del()" th:text="删除"></a>
        </td>
    </tr>
</table>
<nav role="navigation" th:if="${totalPages eq 0}">
    没有找到商品！
</nav>
<nav role="navigation" th:if="${not (totalPages eq 0)}">
    <ul class="cd-pagination no-space">
        <li><a  th:href="@{${'/product/findAll'}(pageNum=1,size=${pageSize},pName=${pName})}">&laquo;</a></li>
        <li>
            <a th:if="${not isFirstPage}" class="button" th:href="@{${'/product/findAll'}(pageNum=${pageNum - 1},pageSize=${pageSize},pName=${pName})}">Previous</a>
            <a th:if="${isFirstPage}" class="disabled" href="javascript:void(0);">Previous</a>
        </li>

        <li th:each="pageNo : ${#numbers.sequence(1, totalPages)}">
            <a th:if="${pageNum eq pageNo}" class="current" href="javascript:void(0);">
                <span th:text="${pageNo}"></span>
            </a>
            <a th:if="${not (pageNum eq pageNo)}" th:href="@{${'/product/findAll'}(pageNum=${pageNo},size=${pageSize},pName=${pName})}">
                <span th:text="${pageNo}"></span>
            </a>
        </li>
        <li>
            <a th:if="${not isLastPage}" class="button" th:href="@{${'/product/findAll'}(pageNum=${pageNum+1},size=${pageSize},pName=${pName})}">Next</a>
            <a th:if="${isLastPage}" class="disabled" href="javascript:void(0);">Next</a>
        </li>
        <li><a  th:href="@{${'/product/findAll'}(pageNum=${totalPages},size=${pageSize},pName=${pName})}">&raquo;</a></li>
    </ul>
</nav>

</body>
</html>